<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="telephone=no" name="format-detection" /> 
<title>javascript星级评分</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
#wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} 
#wrapper img{float:left;width:23px;height:20px;} 
p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
	 <img src="img/h_star.png" alt="">
	 <img src="img/h_star.png" alt="">
	 <img src="img/h_star.png" alt="">
	 <img src="img/h_star.png" alt="">
	 <img src="img/h_star.png" alt=""> 
</div> 
<p></p> 
</body> 
</html> 
<script type="text/javascript"> 
	window.onload = function(){ 
		var oDiv = document.getElementById('wrapper'); 
		var star = oDiv.getElementsByTagName('img'); 
		var temp = 0; 
		for(var i = 0, len = star.length; i < len; i++){ 
			star[i].index = i; 
			star[i].onmouseover = function(){ 
				clear(); 
				for(var j = 0; j < this.index + 1; j++){ 
					star[j].src = 'img/hl_star.png'; 
					} 
			}; 
			star[i].onmouseout = function(){ 
				for(var j = 0; j < this.index + 1; j++){ 
					star[j].src = 'img/h_star.png'; 
				}; 
			current(temp); 
			}; 
			star[i].onclick = function(){ 
				temp = this.index + 1; 
				document.getElementsByTagName('p')[0].innerHTML = temp + ' 颗星'; 
				current(temp); 
			}; 
		} 
		//清除所有 
		function clear(){ 
			for(var i = 0, len = star.length; i < len; i++){ 
				star[i].src = 'img/h_star.png'; 
			} 
		} 
		//显示当前第几颗星 
		function current(temp){ 
			for(var i = 0; i < temp; i++){ 
				star[i].src = 'img/hl_star.png'; 
			} 
		} 
	}; 
</script> 